<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			#big {
				width: 500px;
				height: 500px;
				margin: 100px auto;
				position: relative;
				background-color: darkcyan;
			}

			#small {
				width: 300px;
				background-color: white;
				border: 1px solid red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: none;
			}

			#zz {
				width: 100%;
				height: 100vh;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, .3);
				display: none;
			}

			img {
				width: 100px;
				height: 100px;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		<div id='big'>
			<p>
				点击不同的图片弹出不同内容
			</p>
			<img src="https://i03piccdn.sogoucdn.com/94ca21cbd06b4320">
			<img src="https://i04piccdn.sogoucdn.com/221867d5cfadaadb">
			<img src="https://i03piccdn.sogoucdn.com/93d4fadb614b72ee">
			<img src="https://i01piccdn.sogoucdn.com/8013a073f168db44">
			<img src="https://i01piccdn.sogoucdn.com/1685fe29e9c7fac3">
			<img src="https://i02piccdn.sogoucdn.com/8207d9f7633643a3">
			<img src="https://i02piccdn.sogoucdn.com/7a0c0b8b597a98b2">
			<img src="https://i03piccdn.sogoucdn.com/eb4e6a63b2373da2">
			<img src="https://i03piccdn.sogoucdn.com/723a93584c36adf2">
		</div>
		<div id='zz'></div>
		<div id='small'>
			<!-- canvas,也就是画布的宽高 -->
			<canvas id="canvas" width="300" height="300"></canvas>
		</div>
		<script>
			// 获取所有图片
			var img = document.querySelectorAll('img');
			var canvas = document.getElementById('canvas');
			var c = canvas.getContext('2d');
			var s = document.getElementById('small');
			var zz = document.getElementById('zz');
			// 文字内容,看你需求,可以放在数组中处理
			var arr = ['@aaaaaaaaaaa','@bbbbbbbb','@cccccccc','@dddddddd','@eeeeee','@fffffff','@ggggggggggggg','@hhhhhhhhhhh','@iiiiiiiiiii',]
			for (let i = 0; i < img.length; i++) {
				img[i].onclick = function() {
				    // 将图片放在画布上,x/y坐标，图片宽/高
					c.drawImage(img[i], 0, 0, 300, 300);
					// 设置画布字体的样式
					c.font = '16px 微软雅黑';
					// 在画布上绘制填充的文本, x/y坐标(文本位置)
					c.fillText(arr[i], 200, 290);
					s.style.display = 'block';
					zz.style.display = 'block';
				}
			}
			zz.onclick = function() {
				s.style.display = 'none';
				zz.style.display = 'none';
			}
		</script>
	</body>
</html>
